<template>
  <el-row>
    <el-col style="text-align:left;" span="6">
      <el-popconfirm title="确认删除？" @confirm="">
        <template #reference>
          <el-button type="danger" icon="Delete">批量删除</el-button>
        </template>
      </el-popconfirm>
    </el-col>
  </el-row>
  <el-table :data="tableData" :span-method="objectSpanMethod" style="width: 100%;"
    @selection-change="handleSelectionChange">
    <el-table-column type="expand">
      <template #default="props">
        <h3>第一位成员：{{ props.row.first }}</h3>
        <el-table :data="props.row.F" stripe border>
          <el-table-column type="selection" width="55" @click="toggleSelection" />
          <el-table-column type="index" label="#" />
          <el-table-column label="体温" prop="temperature" />
          <el-table-column label="日期" prop="time" />
          <el-table-column prop="actions" label="操作">
            <el-row>
              <el-col>
                <span @click="editItem(props.row)">
                  <el-button icon="Edit" @click="dialogVisibled = true" circle />
                </span>
                <el-dialog v-model="dialogVisibled" title="修改" width="50%">
                  <el-form :model="form" label-width="120px">
                    <el-form-item label="体温">
                      <el-input v-model="forms.temperature" />
                    </el-form-item>
                    <el-form-item label="日期">
                      <el-input v-model="forms.time" />
                    </el-form-item>
                    <el-form-item>
                      <el-button @click="dialogVisibled = false">取消</el-button>
                      <el-button type="primary" @click="onEdit">提交</el-button>
                    </el-form-item>
                  </el-form>
                </el-dialog>
                <el-popconfirm title="确认删除？" @confirm="removeItem(props.row.userId)">
                  <template #reference>
                    <el-button icon="Delete" type="danger" circle></el-button>
                  </template>
                </el-popconfirm>
              </el-col>
            </el-row>
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column type="index" label="#" />
    <el-table-column prop="username" label="用户名" width="180" />
    <el-table-column>
      <template #header>
        <el-input v-model="search" size="small" placeholder="输入关键字" />
      </template>
      <template #default="scope">
        <span @click="addItem(scope.row)">
          <el-button type="success" icon="Plus" @click="dialogVisible = true">
            新增
          </el-button>
        </span>
        <el-dialog v-model="dialogVisible" title="新增" width="50%">
          <el-form :model="form" label-width="120px">
            <el-form-item label="体温">
              <el-input v-model="form.temperature" />
            </el-form-item>
            <el-form-item label="日期">
              <el-input v-model="form.time" />
            </el-form-item>
            <el-form-item>
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="onSubmit">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import { ref, reactive, watchEffect } from 'vue'
import request from '../../utils/request.js';

const multipleTableRef = ref()
const multipleSelection = ref([])
const tableData = ref([])


// 获取列表
const getData = watchEffect(async function () {
  const { data } = await request.get('record/list')
  console.log('team', data)

  tableData.value = data.data
})
getData()

// 增加
const dialogVisible = ref(false)
const id = ref('')
const list = ref([])
const form = reactive({
  temperature: '',
  time: ''
})

const addItem = function (row) {
  id.value = row.userId
  list.value = row.F
  console.log(id.value, list.value)
}

const onSubmit = () => {
  Object.assign({}, form)

  console.log('submit!', Object.assign(form, ...list.value))
  // request.put('record/add',{
  //   userId:id.value,
  //   F:Object.assign(form,list.value)
  // }).then((data)=>{
  //   console.log('add',data)
  // })
}

// 修改
const dialogVisibled = ref(false)
const forms = reactive({
  temperature: '',
  time: ''
})
const editItem = function (row) {
  // id.value = row.userId
  // list.value = row.F
  // console.log(id.value,list.value)
}
const onEdit = () => {
  console.log('submit!')
}


//  删除
const removeItem = async function (id) {
  const { data } = await request.delete('record/delete/' + id)
  console.log('delete', data)
}

const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value.toggleRowSelection(row)
    })
  } else {
    multipleTableRef.value.clearSelection()
  }
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}



</script>
<style lang="scss" scoped>
</style>